<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css"  rel="stylesheet">
<link href="css/bootstrap-theme.css"  rel="stylesheet">
 
<script type="text/javascript" charset="utf-8" src="js/jquery.js"></script> 
<script type="text/javascript" charset="utf-8" src="js/bootstrap.js"></script>
<style>
	
	@media screen and (max-width: 980px) {
		
	 }

	/* Small devices (tablets, 768px and up) */
	@media screen and (max-width: 700px) {
		
	 }
	
	/* Medium devices (desktops, 992px and up) */
	@media screen and (max-width: 480px) {
		
	  }
	.center-block {
	  display: block;
	  margin-left: auto;
	  margin-right: auto;
	  float:none;
	}

	/* Large devices (large desktops, 1200px and up) */
	
</style>
</head>
<body>
	<div class="container" id="context">
    		<div class="row" style="height:100%">
            	 <div class="col-md-12" style="background-color:rgb(0,0,0);height:8%;color:#fff" >
                 		<div class="col-md-2 col-xs-2"><div class="glyphicon glyphicon-th-list btn btn-lg"></div></div>
                        <div class="col-md-8 text-center col-xs-8" style="font-family:黑体;font-size:18px;font-weight:bold">个人中心</div>
                        <div class="col-md-2 col-xs-2"><div class="glyphicon glyphicon-cog btn btn-lg"></div></div>
                        
                   
           		 </div>
                 <div class="col-md-12" style="background-color:rgb(254,157,52);height:35%;">
                  		<div class="col-md-2 col-sm-3 col-xs-5 center-block" style="background-color:;height:50%;">
                        	<div class="img-circle" style="height:30%;width:30%;position:absolute;top:5px;left:5px;background-color:#0FC;border:2px solid #fff">
                           	
                            </div>
                            <div class="center-block" style="height:100%;width:100%;">
                            	<img class="img-circle center-block img-responsive" src="images/jordan.png" style="border:2px solid #fff;height:100%">
                            </div>
                            <div class="center-block">
                            	<h3 id="username">sole</h3>
                            </div>
                        </div>
                 </div>
                  <div class="col-md-12" style="background-color:rgb(255,255,255);height:15%;">
                  		
                 </div>
                  <div class="col-md-12" style="background-color:rgb(236,236,236);height:42%;">
                  		
                 </div>


           		 </div>
            </div>
    </div>
</body>
<script>
	var cheight=document.documentElement.clientHeight;
	var context=document.getElementById("context");
	context.style.height=cheight+"px";
	function load(){
		var user=JSON.parse(window.localStorage.user);
		var name=document.getElementById("username");
		name.innerHTML=user.userName;
	}
	load();
</script>
</html>